<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		* {
			list-style: none;
			cursor: default;
			user-select: none;
		}

		li:hover {
			background-color: antiquewhite;
		}

		li:active {
			color: white;
			background-color: gray;
		}
	</style>
	<body>
		<ul>
			<li>第1个</li>
			<li>第2个</li>
			<li>第3个</li>
		</ul>

		<script type="text/javascript">
			var ul = document.querySelector("ul")
			ul.addEventListener("click", function(e) {
				let nodeName = e.target.nodeName.toLocaleLowerCase()
				console.log("我点击了ul");

				if (nodeName == 'li') {
					console.log("点击li触发")
				}
			})
		</script>
	</body>
</html>